<template>
  <!-- 中间部分工作区域组件 -->
  <transition name="el-fade-in-linear">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div id="personal">
        <div  class="p-lr-15  border-b">
          <transition  name="van-fade">
            <div class="overflow" @click="linkto(tabs.info[0].link)">
              <img  v-if="this.$store.getters.getUserInfo!=null"  onerror="this.src='/static/img/defaultHead.jpg'"  :src="proAPI.RESOURCE_URL+this.$store.getters.getUserInfo.headImage" class="headImg" />
              <img  v-else src="/static/img/defaultHead.jpg"   class="headImg" />
              <div  class="headImgBtn overflow text-right title24"><van-icon name="arrow" /></div>
            </div>
          </transition>
          <div class="text-left p-l-15">
            <div  class="p-tb8">
              {{this.$store.getters.getUserInfo==null?'未登录':this.$store.getters.getUserInfo.nickName}}
            </div>
          </div>
        </div>
        <van-row>
          <van-col :span="24"  class="text-left p-lr10">
            <div class="p-tb10">账户余额: <span v-if="this.$store.getters.getValForKey('userAsset')!=null">{{proUtil.Money(this.$store.getters.getValForKey('userAsset').balance)}}</span></div>
          </van-col>
          <van-col :span="24" >
            <van-grid :gutter="8" square :column-num="4">
              <van-grid-item
                v-for="(x,index) in tabs.money"
                :key="index"
                :icon="x.icon"
                :text="x.name"
                :to="x.link"
              />
            </van-grid>
          </van-col>
        </van-row>
        <van-row >
          <van-col :span="24"  class="text-left p-lr10">
            <div class="p-tb10">账户管理</div>
          </van-col>
          <van-col :span="24">
            <van-grid :gutter="8" square :column-num="4">
              <van-grid-item
                v-for="(x,index) in tabs.account"
                :key="index"
                :icon="x.icon"
                :text="x.name"
                :to="x.link"
              />
            </van-grid>
          </van-col>
        </van-row>
        <van-row >
          <van-col :span="24"  class="text-left p-lr10">
            <div class="p-tb10">团队管理</div>
          </van-col>
          <van-col :span="24">
            <van-grid :gutter="8" square :column-num="4">
              <van-grid-item
                v-for="(x,index) in tabs.team"
                :key="index"
                :icon="x.icon"
                :text="x.name"
                :to="x.link"
              />
            </van-grid>
          </van-col>
        </van-row>
        <van-row class="p-tb20 breakAll">
          <van-col span="20" offset="2">
            <div class="p-tb10">{{this.$store.getters.getConfig().friendlyReminder}}</div>
            <div>{{this.$store.getters.getConfig().companyName}}</div>
          </van-col>
        </van-row>
      </div>
    </van-pull-refresh>
  </transition>
</template>
<script type="es6" scoped>
  import recharge from '../../assets/userCenter/recharge.png';
  import assetLog from '../../assets/userCenter/assetLog.png';
  import banks from '../../assets/userCenter/banks.png';
  import comment from '../../assets/userCenter/comment.png';
  import inviteCode from '../../assets/userCenter/inviteCode.png';
  import pwd from '../../assets/userCenter/pwd.png';
  import rechargeLog from '../../assets/userCenter/rechargeLog.png';
  import recommend from '../../assets/userCenter/recommend.png';
  import withdraw from '../../assets/userCenter/withdraw.png';
  import withdrawLog from '../../assets/userCenter/withdrawLog.png';
  export default {
    data() {
      return {
        count: 0,
        isLoading: false,
        tabs:{
          info:[
            {name:"个人资料",link:'/home/info/userInfo',icon:'after-sale'}
          ],
          money:[
            {name:"充值",link:'/home/account/recharge',icon:recharge},
            {name:"提现",link:'/home/account/withdraw',icon:withdraw},
            {name:"充值记录",link:'/home/account/rechargeLog',icon:rechargeLog},
            {name:"提现记录",link:'/home/account/withdrawLog',icon:withdrawLog}
          ],
          account:[
            {name:"账变记录",link:'/home/account/assetLog',icon:assetLog},
            {name:"银行卡管理",link:'/home/account/banks',icon:banks},
            {name:"登陆密码",link:'/home/account/pwd',icon:pwd},
            {name:"系统消息",link:'',icon:comment}
          ],
          team:[
            {name:"邀请码",link:'/home/account/inviteCode',icon:inviteCode},
            {name:"推荐注册",link:'/home/account/recommend',icon:recommend},
          ]
        }
      }
    },
    methods: {
      init() {
        this.$store.commit("init");
      },
      onRefresh() {
        this.init();
        setTimeout(()=>{
          this.isLoading=false;
        },1000)
      },
      linkto(path){
        console.log(path);
        this.$router.push(path);
      }
    },
    mounted(){
    },
    activated(){
      if(!this.$store.getters.getUserInfo){
        this.init();
      }
    }
  }
</script>
<style scoped lang="scss">
  $height:124px;
  $headImgH:64px;
  $border_circle:$headImgH;
  #personal{
    text-align: center;
    padding:$height*0.5- 64*0.8 0;
    .headImg{
      height:$headImgH;
      width:$headImgH;
      border-radius: $border_circle;
      overflow: hidden;
      float:left;
    }
    .headImgBtn{
      line-height:$headImgH
    }
  }
</style>
